<template>
	<view>
		<c-header :back="true" :show-background="true" />
		<view class="audio-content" :style="{marginTop: titleFixHeight + 42 + 'px'}">
			<u-image width="100%" radius="16px" :src='info.cover_url'></u-image>
			<!-- <image width="100%" height="600rpx" mode="widthFix" :src="apiUrl + item.cover" /> -->
			<view class="progress-bar">
				<view class="u-m-t-18 u-p-l-16 u-p-r-28 d-flex align-center">
					<view class="u-m-r-20">{{timeText}}</view>
					<u-line-progress height="9rpx" activeColor='#ffffff' :percentage='position'
						inactiveColor="rgba(0, 0, 0, .4)" @change='changeSlide' />
					<view class="u-m-l-20">{{durationTimeText}}</view>
				</view>
				<uv-button @click="playAudio"></uv-button>
			</view>
		</view>
		<view class="u-p-30">
			<view class="d-card">
				<view class="d-title d-flex align-center justify-between">
					<view class="u-line-1">{{item.title}}</view>
					<view class="d-flex">
						<view @click="collect">
							<u-icon v-if="!item.collect_status" name='star' :size='24' />
							<u-icon v-else name='star-fill' color='#f85a5a' :size='24' />
						</view>
						<view class="d-title-share">
							<button open-type="share" class="share-btn">
								<u-icon name="share-fill" color="#3D3D3D" size="24" />
							</button>
						</view>
					</view>
				</view>
				<view class="u-m-t-26 d-flex align-center">
					<u-image src="" width="20" height="20" />
					<view class="u-m-l-10 d-times">{{item.play_count}} 次</view>
				</view>
				<!-- <view class="d-flex u-m-t-20 align-center">
					<view class="common-font">倍率</view>
					<view class="play-rate u-m-l-20" :class="{'play-rate-active': rate === playbackRate}"
						@click="changeRate(rate)" v-for="rate in playbackRateList" :key="rate">
						<view class="rate-value">{{rate}}</view>
					</view>
				</view> -->
				<view class="d-flex align-center u-m-t-74" style="margin-left: 148rpx;">
					<u-image width="94rpx" height="94rpx" src="" @click="prev" />
					<view @click="playAudio">
						<u-icon v-if="!playStatus" name="play-circle-fill" :color="$primaryColor" :size="88" />
						<u-icon v-else name="pause-circle-fill" :color="$primaryColor" :size="88" />
					</view>
					<u-image width="94rpx" height="94rpx" src="" @click="next" />
				</view>
			</view>
			<view class="d-card u-m-t-40 p-d-50">
				<view class="u-m-t-30" v-if="info.content">
					<view class="d-title">简介</view>
					<view class="hide" :class="flag?'active':''">
						<u-parse :content="flag?info.content:(info.content.substring(0,69)+'......')"
							:tagStyle="style"></u-parse>
						<!-- {{flag?info.content:(info.content.substring(0,69)+'......')}} -->
						<view class="hide-btn" @click="showTage">{{flag?'收起':'展开'}}<u-icon
								:name="flag?'arrow-up':'arrow-down'" color="" size="18"></u-icon></view>
					</view>
				</view>
				<view class="u-m-t-30">
					<view class="d-title">选集</view>
					<view class="u-m-t-20">
						<u-grid :border="false" col="4">
							<u-grid-item v-for="(item, index) in sets" :key="index" @click="toPlay(item)">
								<view class="d-sets" :class="activeId === item.id ? 'd-sets-active' : ''">
									第{{index + 1}}集
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import playAudio from '../../../../util/playAudio.js'
	export default {
		data() {
			return {
				sets: [],
				item: {},
				info: {},
				apiUrl: 'https://music.163.com/song/media/outer/url?id=95477.mp3',
				activeId: '',
				playbackRateList: [0.5, 1.0, 1.25, 1.5, 2.0],
				playbackRate: 1,
				flag: false,
				text: '',
				style: {
					p: 'font-size:26rpx;line-height: 70rpx;',
				},
				can_play: true
			}
		},
		mixins: [playAudio],
		onLoad(option) {
				this.dAudioUrl = this.apiUrl

		},
		methods: {
			showTage() {
				this.flag = !this.flag
			},
			toPlay(item) {
				this.item = item
				this.activeId = item.id
				if (this.innerAudioContext) {
					this.innerAudioContext.seek(0)
				}
				this.dAudioUrl = this.item.media_url
				this.calculatePlayCount()
			},
			// 计算播放次数
			calculatePlayCount() {
				this.$axios.post('/api/User/play', {
					id: this.item.id
				})
			},
			// 收藏
			collect() {
				this.doCollect(this.item.id, 2, this.item.collect_status ? 2 : 1, (r) => {
					this.item.collect_status = r
				})
			},
			// 改变倍率
			changeRate(rate) {
				this.playbackRate = rate
				this.innerAudioContext.playbackRate = this.playbackRate
				this.innerAudioContext.pause()
				this.innerAudioContext.play()
				this.playStatus = true
			},
			prev() {
				this.can_play = true
				this.sets.forEach((item, index) => {
					if (this.activeId === item.id && this.can_play) {
						let o = this.sets[index - 1]
						if (o) {
							this.can_play = false
							this.toPlay(o)
							return false
						}
					}
				})
			},
			next() {
				this.can_play = true
				this.sets.forEach((item, index) => {
					if (this.activeId === item.id && this.can_play) {
						let o = this.sets[index + 1]
						if (o) {
							this.can_play = false
							this.toPlay(o)
							return false
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hide-btn {
		position: absolute;
		right: 0rpx;
		line-height: 70rpx;
		bottom: -6rpx;
		font-size: 26rpx;

		display: flex;
		background-color: #ffffff;
		letter-spacing: 5px;
	}

	.hide {
		height: 200rpx;
		overflow: hidden;
		line-height: 70rpx;
		position: relative;
		font-size: 26rpx;
	}

	.active {
		height: auto;
		position: relative;
		overflow: visible;
		display: block;
	}

	.p-d-50 {
		padding-bottom: 150rpx;
	}

	.progress-bar {
		position: absolute;
		bottom: 0;
		background: rgba(0, 0, 0, .1);
		height: 66rpx;
		width: 100%;
		color: #ffffff;
		font-size: 26rpx;
	}

	.d-title {
		font-size: 36rpx;
		color: #393939;
		font-weight: bold;
	}

	.d-times {
		color: #969696;
		font-size: 24rpx;
	}

	.d-sets {
		color: #515151;
		margin: 10rpx 0;
		border: 1px solid #515151;
		font-size: 24rpx;
		width: 80%;
		text-align: center;
		padding: 15rpx 0;
		border-radius: 8rpx;
	}

	.d-sets-active {
		border: 1px solid;
	}

	.play-rate {
		color: #999999;
		border: 1px solid #999999;
		font-size: 22rpx;
		border-radius: 8rpx;
		width: 60rpx;
		padding: 6rpx 0;

		.rate-value {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.play-rate-active {
		border: 1px solid ;
	}

	.audio-content {
		position: relative;
		background: #d8d8d8;
	}

	.d-title-share {
		margin-left: 8rpx;
	}

	.share-btn {
		background: transparent;

		&::after {
			border: none;
		}
	}
</style>